﻿@page "/Overlay"

@using FluentUI.Demo.Shared.Pages.Overlay.Examples

<PageTitle>@App.PageTitle("Overlay")</PageTitle>

<h1>Overlay</h1>

<p>Overlays are used to temporarily overlay screen content to focus a dialog, progress or other information/interaction.</p>

<h2 id="example">Examples</h2>

<DemoSection Title="Default" Component="typeof(OverlayDefault)" >
    <Description>Overlay with a default white background</Description>
</DemoSection>

<DemoSection Title="Timed" Component="typeof(OverlayTimed)">
    <Description>A timed overlay that hides after being shown for 3 seconds</Description>
</DemoSection>

<DemoSection Title="Transparent overlay" Component="typeof(OverlayTransparent)">
    <Description>Overlay with a transparent background</Description>
</DemoSection>

<DemoSection Title="Background color" Component="typeof(OverlayBackgroundColor)">
    <Description>Overlay with a custom background color</Description>
</DemoSection>

<DemoSection Title="Full screen" Component="typeof(OverlayFullScreen)">
    <Description>Overlay which takes up the whole screen</Description>
</DemoSection>

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentOverlay)" />
